<template>
        <div id="funnelPlot" style="width: 100%;height: 100%"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
onMounted(() => {
    var chartDom = document.getElementById('funnelPlot')
    var myChart = echarts.init(chartDom)
    var option
    option = {
        title: {
            text: '用户转化漏斗',
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}%',
        },
        grid: {
            left: '3%',
            right: '0',
            bottom: '4%',
            top: '20px',
            containLabel: true,
        },
        legend: {
            data: ['访问进入小程序', '浏览页面/商品', '注册', '加入购物车', '订单支付', '完成交易'],
            orient: 'vertical',
            right: '0',
            bottom: '5',
        },
        series: [
            {
                name: 'Funnel',
                type: 'funnel',
                top: 60,
                bottom: 10,
                left:25,
                width: '70%',
                min: 35,
                max: 100,
                minSize: '35%',
                maxSize: '100%',
                sort: 'descending',
                label: {
                    show: false,
                },
                labelLine: {
                    length: 10,
                    lineStyle: {
                        width: 1,
                        type: 'solid',
                    },
                },
                itemStyle: {
                    borderWidth: 0,
                },
                emphasis: {
                    label: {
                        fontSize: 20,
                    },
                },
                data: [
                    {
                        value: 35,
                        name: '完成交易',
                        itemStyle: {
                            color: 'rgb(0, 152, 250,0.1)',
                        },
                    },
                    {
                        value: 40,
                        name: '订单支付',
                        itemStyle: {
                            color: 'rgb(0, 152, 250,0.25)',
                        },
                    },
                    {
                        value: 64,
                        name: '加入购物车',
                        itemStyle: {
                            color: 'rgb(0, 152, 250,0.5)',
                        },
                    },
                    {
                        value: 80,
                        name: '注册',
                        itemStyle: {
                            color: 'rgb(0, 152, 250,0.75)',
                        },
                    },
                    {
                        value: 100,
                        name: '浏览页面/商品',
                        itemStyle: {
                            color: 'rgb(0, 152, 250)',
                        },
                    },
                    {
                        value: 100,
                        name: '访问进入小程序',
                        itemStyle: {
                            color: 'rgb(0, 152, 250)',
                        },
                    },
                ],
            },
        ],
    }
    option && myChart.setOption(option)
})
</script>

<style scoped>
</style>
